

    $(function () {
        //加载用户信息
        is_user()
        $("img").lazyload()
        function getId() {
            return location.hash.split("=")[1]
        }

        function get_goodspage() {
            let options = {
                url: "http://127.0.0.1:8888/goods/item/" + getId(),
                type: "GET",
                dataType: "json",
                data: {
                    id: getId()
                }
            }
            $.ajax(options)
                .done(function (res) {
                    console.log(res);
                    render_page(res)
                })
        }
        //渲染页面
        function render_page(res) {
            console.log(res.info);
            $("#small-img-img")[0].src=`${res.info.img_big_logo}`;
            $("#big-img-img")[0].src=`${res.info.img_big_logo}`

            $(".main_wraper").append(
            `<div class="render_box">
             <div class="container-page">
               
                <p>${res.info.title}</p>
                <b>￥${res.info.current_price}&nbsp;&nbsp;&nbsp;</b>
                <i>折扣专享</i>
                <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ${res.info.goods_number}人购买&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>
                <span>原价：￥${res.info.price}</span>
                <button data-id="${res.info.goods_id}"><span class="iconfont">&#xe641;</span>购物车&nbsp;&nbsp;&nbsp;</button>
             </div>
         </div>`
        )
        $("img").lazyload()
        }
        //放大镜
        
        $small_img = $(".small-img")
            $focus = $(".focus")
            $big_img = $(".big-img")
            $big_img_img = $("#big-img-img")
            $small_img.on("mouseover", function () {
                $focus.css({ display: "block" });
                $big_img.css({ display: "block" })
            })
            $small_img.on("mouseout", function () {
                $focus.css({ display: "none" });
                $big_img.css({ display: "none" })
            })
            $small_img.on("mousemove", function (e = event) {

                focus_move(e.clientX, e.clientY)
            })
            function focus_move(x, y) {
                let _left = x - $small_img.offset().left - $focus.width() / 2;
                let _top = y - $small_img.offset().top -  $focus.height() / 2
                //极值
                if(_left<0){
                    _left = 0
                }
                if(_left > $small_img.width() - $focus.width()){
                    _left=$small_img.width() - $focus.width()
                }
                if(_top < 0 ){
                    _top = 0
                }
                if(_top > $small_img.height() - $focus.height() ){
                    _top = $small_img.height() - $focus.height()
                }
                $focus.css({
                    left: _left,
                    top: _top,
                })
                big_img_move( _left,_top)

            }
            function big_img_move(left,top){
                //计算每一个的移动比例的大小 125
                let prop_left = left / ($small_img.width() - $focus.width())
                let prop_top  = top /  ($small_img.height() - $focus.height())
                //大图比例的移动距离
                $big_img_img.css({
                    left:- prop_left * ($big_img_img.width()- $big_img.width()),
                    top:- prop_top * ($big_img_img.height()- $big_img.height()),
                }) 
            }
        //购物车    
        $(".main_wraper").on("click","button",handler_AddCart)
        get_goodspage()

    })

